<template>
  <div class="w-[1111px] mx-auto pt-10 print-wrapper">
    <el-row
      :gutter="10"
      class="my-1 font-bold text-[18px]"
      style="font-family: 宋体; text-stroke: 0.5px #000"
    >
      <el-col :span="3">
        <div>
          <span
            style="font-family: 黑体; text-stroke: 0px #000"
            class="tracking-[10px]"
            >客</span
          >
          <span style="font-family: 黑体; text-stroke: 0px #000">户：</span>
          <span>{{ customer.name }}</span>
        </div>
      </el-col>
      <el-col :span="4">
        <div>
          <span>电话：</span>
          <span>{{ customer.mobile }}</span>
        </div>
      </el-col>
      <el-col :span="13">
        <div class="whitespace-nowrap">
          <span>订货日期：</span>
          <span class="mr-8">{{
            dayjs(timeStampFormatter(saleOrderInfo.TOrderPDate, true)).format(
              "YYYY年MM月DD日"
            )
          }}</span>
          <span>交货日期：</span>
          <span>{{
            dayjs(timeStampFormatter(saleOrderInfo.TOrderEDate, true)).format(
              "YYYY年MM月DD日"
            )
          }}</span>
        </div>
      </el-col>
      <el-col :span="4">
        <span>接单员：{{ saleOrderInfo.SalesmanName }}</span>
      </el-col>
    </el-row>
    <table
      cellPadding="0"
      cellSpacing="0"
      border="1"
      class="text-center w-full"
      style="font-family: 宋体"
    >
      <tr style="font-family: normal">
        <template v-for="(item, index) in tableHeaderConfig" :key="index">
          <th v-if="item.key == 'Count'" class="text-center" colspan="2">
            <div>数量</div>
            <div class="flex justify-between mx-2">
              <div class="mr-4">左</div>
              <div>右</div>
            </div>
          </th>
          <th v-else :style="{ width: item.width }" :colspan="item.colspan">
            {{ item.name }}
          </th>
        </template>
      </tr>
      <template v-for="(dataItem, index) in orderData" :key="index">
        <tr>
          <template v-for="header in tableHeaderConfig" :key="header.key">
            <template v-if="header.key == 'Count'">
              <td class="py-1">
                {{ dataItem.Count1 || '0' }}
              </td>
              <td class="py-1">
                {{ dataItem.Count2 || '0' }}
              </td>
            </template>
            <td v-else-if="header.key == 'specification'" class="py-1">
              {{ dataItem.Height_Total }}*{{ dataItem.Width_Total }}*{{
                dataItem.Tickness_Wall
              }}
            </td>
            <td v-else-if="header.key == 'Height_Left'" class="py-1">
              {{ dataItem.Height_Left }}
            </td>
            <td v-else-if="header.key == 'DoorHeaderPost'" class="py-1">
              {{ dataItem.DoorHeader }} {{ dataItem.DoorPost }}
            </td>
            <td v-else-if="header.key == 'serialNo'">{{ index + 1 }}</td>
            <td v-else class="py-1">
              {{ dataItem[header.key] }}
            </td>
          </template>
        </tr>
        <tr>
          <td colspan="100" class="text-left p-1">
            价格说明：{{ dataItem.Remark_Money }}
          </td>
        </tr>
        <tr>
          <td colspan="100" class="text-left p-1">
            备注：{{ dataItem.Remark }}
          </td>
        </tr>
      </template>
    </table>
    <div class="mx-3">
      <el-row :gutter="20">
        <el-col :span="13">
          <div class="font-bold text-[15px]">
            开门方向:以人站在门外为准，订货付50%订金，余款出货前付清，订单生产日期以客户签字回传第二天开始生效
          </div>
          <div class="text-[14px]">
            <div>1、订货时先付50%订金，余款发货前付清。</div>
            <div>
              2、交货方式：收到全款后，货送到需方指定的托运部，代办托运，费用由需方支付。
            </div>
            <div>3、运输途中造成的损失由运输方承担。</div>
            <div>
              4、如收到货后有质量问题在十天内提出，逾期供方不再承担责任。
            </div>
            <div>
              5、非标门属特殊行业，有质量问题供方给予修理或重做，承担运费损失，但不退货。
            </div>
          </div>
          <div
            class="my-4 text-[18px]"
            style="font-family: 宋体; text-stroke: 0.5px #000"
          >
            <div>请确认无误后签字回传，并安排50%订金下单生产，谢谢!</div>
            <div class="mt-2">
              <span class="mr-8">电话：{{ "0579-87798310  " }} {{'87798312'}}</span>
              <span>传真：{{ "0579-87152172" }}</span>
            </div>
          </div>
          <div
            class="text-[22px] font-bold"
            style="font-family: 宋体; text-stroke: 0.5px #000"
          >
            <span>合计金额：</span>
            <span
              style="border-bottom: 1px solid black"
              class="pl-2 pr-20 mr-4"
            ></span>
            <span>客户签字：</span>
            <span
              style="border-bottom: 1px solid black"
              class="px-40 pl-2"
            ></span>
          </div>
        </el-col>
        <el-col :span="10" :offset="1">
          <div
            class="flex mt-2 font-bold"
            style="font-family: 宋体; text-stroke: 0.5px #000"
          >
            <div>
              <!-- <div class="text-center">款式</div> -->
              <el-image
                v-if="images[0]"
                :src="images[0]"
                fit="cover"
              ></el-image>
            </div>
            <div>
              <!-- <div class="text-center">颜色</div> -->
              <el-image
                v-if="images[1]"
                :src="images[1]"
                fit="cover"
              ></el-image>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-button
      style="margin-left: 85%; width: 180px"
      type="primary"
      size="large"
      ref="printBtn"
      :icon="Printer"
      @click="print"
      >打印</el-button
    >
  </div>
</template>
<script setup>
import { nextTick, onMounted } from "vue";
import tableHeaderConfig from "./tableConfig.json";
import { Printer } from "@element-plus/icons-vue";
import { timeStampFormatter } from "@/utils";
import dayjs from "dayjs";

const route = useRoute();
const orderData = ref();
const customer = ref({});
const images = ref([]);
const printBtn = ref();
const saleOrderInfo = ref({});
onMounted(() => {
  orderData.value = JSON.parse(route.query.data);
  console.log(orderData.value);
  customer.value = JSON.parse(route.query.customer);
  images.value = JSON.parse(route.query.images).map((s) => s.src);
  saleOrderInfo.value = JSON.parse(route.query.saleOrderInfo);
});
async function print() {
  printBtn.value.$el.remove();
  await window.print();
  document.querySelector(".print-wrapper").append(printBtn.value.$el);
}
</script>
<style scoped>
</style>